<template>
  <el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">{{deptName}}/{{position}}</span>
    </template>
  </el-page-header>
  <el-tabs type="border-card" class="demo-tabs" style="margin-top:20px;border-radius: 8px;">
    <el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>评分考核条目</span>
        </span>
      </template>
      <Score :id="id" :fourthId="fourthId" :thirdId="thirdId" :type="type" :auditStatus="auditStatus" :Read="Read"></Score>
    </el-tab-pane>
    <el-tab-pane label="计件考核条目">
        <Piece :id="id" :fourthId="fourthId" :thirdId="thirdId" :type="type" :auditStatus="auditStatus"></Piece>
    </el-tab-pane>
    <el-tab-pane label="提成考核条目">
        <KPI :id="id" :fourthId="fourthId" :thirdId="thirdId" :type="type" :auditStatus="auditStatus"></KPI>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import {ref, onMounted, reactive,getCurrentInstance} from "vue";
import { useRoute } from 'vue-router'
import { Timer } from '@element-plus/icons-vue';
import { Calendar } from '@element-plus/icons-vue'
import Score from './components/score'
import Piece from './components/piece'
import KPI from './components/KPI'

const route = useRoute()
let position=route.query.position
let id=route.query.id;
let deptId=route.query.deptId;
let deptName=route.query.deptName;
let type=route.query.type;
let auditStatus=route.query.auditStatus;

const { proxy } = getCurrentInstance();
const goback=()=>{
  proxy.$router.go(-1)
}
const handleEdit = row => {
  selectRoleId.value = row.id
  distributePermissionVisible.value = true
}
</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>
